<script setup lang="ts">
import { ref, defineProps, computed } from 'vue'

const { tableThs, tableTrs, widthList, tableWidth, isFixdFC, isFixdHead, stripe, stripeColor, textAlign } = defineProps({
  tableThs: {
    //表头行
    type: [Array, String],
    default: () => {
      return ['年份', '保研率', '保研率2']
    },
  },
  tableTrs: {
    //表体数组，这里name和data分开的用途是用于首列固定
    type: [Array, String],
    default: () => {
      return [{ name: '2023', data: ['50%', '50%'] }]
    },
  },
  widthList: {
    //这里控制了每一列占的比例，这里数组的长度必须要等于表头和表体数组的长度。
    type: Array,
    default: () => {
      return [1, 2, 2]
    },
  },
  tableWidth: {
    type: [Number],
    default: () => {
      return 680
    },
  },
  isFixdFC: {
    //是否固定第一列
    type: Boolean,
    default: () => {
      return true
    },
  },
  isFixdHead: {
    //是否固定表头
    type: Boolean,
    default: () => {
      return true
    },
  },
  customHeadClass: {
    type: Array,
    default: () => {
      return []
    },
  },
  stripe: {
    type: Boolean,
    default: () => {
      return false
    },
  },
  stripeColor: {
    type: String,
    default: () => {
      return 'rgba(160, 196, 244, 1);'
    },
  },
  textAlign: {
    type: String,
    default: () => {
      return 'center'
    },
  },
  customTbClass: {
    type: String,
    default: () => {
      return []
    },
  },
})

// table
// const thStart = ref(0)
const thStartX = ref(0)
const listWidth = ref(375)
const scrollLeft1 = ref(0)
const scrollLeft2 = ref(0)

const itemWidth = computed(() => {
  return tableWidth / itemNum.value
})

const itemNum = computed<number>(() => {
  return widthList.reduce((acc, current) => ((acc as number) + (current as number)) as number, 0) as number
})

const tableThsLast = computed(() => {
  console.log('tableThsLast===>', tableThs.slice(1, tableThs.length + 1))
  return tableThs.slice(1, tableThs.length + 1)
})
const thMove = (e) => {
  let x = e[0][0]
  x *= -1
  x += thStartX.value
  if (x <= 0) {
    return
  }
  if (x > listWidth.value) {
    return
  }
  scrollLeft2.value = x
}
const scroll = (e: { detail: { scrollLeft: number } }) => {
  scrollLeft1.value = e.detail.scrollLeft
}
</script>

<template>
  <view class="wh100p custom-table">
    <view class="wh100p flex-center" style="min-height: 300rpx">
      <scroll-view
        class="gui-scroll-x flex-center"
        :scroll-left="scrollLeft2"
        scroll-x
        scroll-y
        style="width: 100%; height: 100%"
        @scroll="scroll"
      >
        <!--        表格整体box-->
        <view class="flex-column border-1" style="margin: 0 auto" :style="{ width: itemWidth * itemNum + 'rpx' }">
          <!-- 表格头-->
          <view
            class="flex table-head border-b-1"
            :class="customHeadClass"
            style="z-index: 4"
            :style="`${isFixdHead ? 'position: sticky; top: 0;' : ''}`"
          >
            <view
              style="left: 0; z-index: 3"
              :style="`width:${widthList[0] * itemWidth}rpx;${isFixdFC ? 'position: sticky; left: 0;' : ''}`"
            >
              <text
                class="gui-data-tb-text gui-border-b"
                :class="customTbClass"
                style="padding: 0 10rpx"
                :style="`width:${widthList[0] * itemWidth}rpx;${stripe ? 'background-color:' + stripeColor : ''}`"
              >
                {{ tableThs[0] }}
              </text>
            </view>
            <view v-for="(td, tdidx) in tableThsLast" :key="tdidx" class="gui-flex gui-row gui-nowrap">
              <text
                class="gui-data-tb-text gui-border-b w100p"
                :class="customTbClass"
                style="padding: 0 10rpx"
                :style="`width:${widthList[tdidx + 1] * itemWidth}rpx;`"
              >
                {{ td }}
              </text>
            </view>
          </view>
          <!--表格体-->
          <view class="flex table-body">
            <view
              class=""
              style="left: 0; background-color: white; z-index: 3"
              :style="`width:${widthList[0] * itemWidth}rpx;${isFixdFC ? 'position: sticky; left: 0;' : ''}`"
            >
              <text
                v-for="(item, index) in tableTrs"
                :key="index"
                class="gui-data-tb-text gui-primary-text gui-border-b"
                :class="customTbClass"
                style="overflow: scroll; padding: 0 10rpx"
                :style="`width:${widthList[0] * itemWidth}rpx;${index % 2 == 1 && stripe ? 'background-color:' + stripeColor : ''}`"
              >
                {{ item.name }}
              </text>
            </view>
            <view class="w100p">
              <view
                v-for="(item, index) in tableTrs"
                :key="index"
                class="gui-flex gui-row gui-nowrap"
                :style="`${index % 2 == 1 && stripe ? 'background-color:' + stripeColor : ''}`"
              >
                <text
                  v-for="(td, tdidx) in item.data"
                  :key="tdidx"
                  class="gui-data-tb-text gui-border-b gui-primary-text"
                  :class="customTbClass"
                  style="padding: 0 10rpx"
                  :style="`width:${widthList[tdidx + 1] * itemWidth}rpx`"
                >
                  {{ td }}
                </text>
              </view>
            </view>
          </view>
        </view>
        <view style="height: 20rpx" />
      </scroll-view>
    </view>
  </view>
</template>

<style>
.custom-table {
  --text-align: var(--text-align, center);
}

.college-logo-box image {
  width: 120rpx;
  height: 120rpx;
  background-color: aliceblue;
  border-radius: 50%;
}

.recruit-pageList .title {
  width: 100%;
  padding: 15rpx 0;
  border-bottom: 1rpx solid #edefe9;
}

.recruit-pageList .item-list {
  width: 100%;
  padding: 15rpx;
  border-bottom: 3rpx solid #edefe9;
}

.gui-data-tb {
  width: 750rpx;
}

.gui-data-tb-l {
  /* width: 200rpx; */
  overflow: hidden;
}

.custom-table .gui-data-tb-text {
  /* width: 200rpx; */
  font-size: 26rpx;
  line-height: 50rpx;
  height: 90rpx;
  overflow: hidden;
  padding: 20rpx 10rpx;
  display: block;
  box-sizing: border-box;
  text-align: var(--text-align);
}

.gui-data-tb-r {
  width: 550rpx !important;
  overflow: hidden;
}

.border-1 {
  //border: 1rpx solid;
}

.border-b-1 {
  //border-bottom: 1rpx solid;
}

.border-r-1 {
  //border-right: 1rpx solid;
}
</style>
